El efecto sombra ha sido uno de mis favoritos, suelo aplicarlos a las imágenes pero esta vez se trata de añadir el efecto sombra a las entradas y en su interior podemos añadir cualquier contenido.
Este efecto se crea con tres cajas, y las sombras se añaden con la clase "blur" y "shadow" para el ejemplo se va a añadir las sombras en color gris pero si utilizáis un color de fondo para el blog es recomendable que la sombra sea del mismo color pero en tono más oscuro.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.blur{
background-color: #ccc; /*color de sombra 1ª*/
color: inherit;
margin-left: 4px; /*borde izquierdo*/
margin-top: 4px; /*borde superior*/
}

.shadow,
.content{
position: relative;
bottom: 2px;/*borde inferior*/
right: 2px; /*borde derecho*/
}
.shadow{
background-color: #666; /*color de sombra 2ª*/
color: inherit;
}
.content{
background-color: #fff; /*color de fondo de la caja*/
color: #000; /*color de texto*/
border: 1px solid #000; /*borde de la caja*/
padding: .5em 2ex;
}

Guardamos los cambios y nos dirigimos al editor de entradas donde añadiremos lo siguiente:

<div class="blur">
<div class="shadow">
<div class="content">aquí el contenido de la caja</div>
</div>
</div>

En nuestro blog veríamos algo así:


Podemos cambiar el color de borde y de las dos sombra, color de fondo, de texto y añadir una imagen de fondo en .content sustituyendo donde dice background-color: #fff; por background:url('aquí la url de tu imagen de fondo');





Visto en Desarrolloweb

Unknown

Ya llevaba yo tiempo queriendo hacer algo así! Muchas gracias por la información!

Responder
Marina-Emer

me está divirtiendo este blog no encuentro la forma de ponerme en contacto con Meigo¿puedes decirme como encontrarle?gracias
un beso Marina

Responder
Mª Teresa Díaz F.

Hola, me gusta mucho tu blog, me esta sirviendo de mucha ayuda para poder decorar el mio, tienes cosas muy interesante. Gracias

Responder
Anónimo

Gem@, fíjate en los backlins de esta entrada...a mi también me está pasando en las últimas entradas publicadas. ¿Blogger loco otra vez? :O

Responder
Petrusdom

Pues yo no consigo el sombreado.
Después de copiar lo de .blur, cuando te refieres al editor de entradas es e de la "Creación nueva entrada" donde debo escribir lo de: div class >> ?
Estoy intentanod aprender. Gracias por tu ayuda.

Responder
Elén

Hola Gema,
se me ve fatal...
Los bordes muy gordos y no se adapta al ancho del blog. Además no veo los sombreados,
he intentado tocar alguna variable, pero no consigo hacerlos más pequeños.
Gracias por tu blog,
Elén

Responder
Marina-Emer

Me gustaria saber como saludar a Meigo,fallecio mi marido y el me dejó unas palabras en mi blog y quisiera saludarle .gracias Gema.abrazos
Marina Pastor

Responder
Gem@

Me alegra que te guste El osito con zapatos nuevos :)

Saludos Teresa Díaz estás en tu casa, espero verte por aquí :)

Rosa me di cuenta hace dos días pero pensé que era algo pasajero y volvería a la normalidad, ocurre en varios blogs. En conversaciones con J.Miur dice que podría ser algo relacionado con los widgets que muestran resúmenes de entradas de otros sitios.
Una lata la verdad porque ahora no tiene sentido mostrar esos enlaces.
Lo prudente sería esperar un poco por si se normaliza y desaparece esa multitud ¿no crees?

Así es Petrusdom cuando digo editor de entradas me refiero a "Creación nueva entrada" ahí es donde hay que añadir el segundo código que envuelve lo que escribimos.

Elén no lo veo añadido a tu blog y no puedo saber donde está el error, pero si se adapta al espacio que disponemos y los bordes los puedes modificar a tu gusto tanto en grosor como en color.

Responder
Gem@

Marina contesté a su comentario en otro lugar donde le hacía saber que las noticias que tengo de Meigo son muy esporádicas.
Me comprometo a enviarle un mail haciéndole saber que tiene interés en localizarlo pero no puedo decirle lo que tardará en ponerse en contacto porque parece ser que no se conecta mucho a Internet.
Siento lo de su marido.

Responder
Anónimo

Hola:

Me congratula mucho como has realizado lo de los cuadros, voy a probarlo en el blog y así le doy un poco de calorcito, que está muy frío. Gracias Mil!

Responder
Gem@

Gracias a ti Boloo :)

Responder
Marisabel

No entiendo Gema, quiere decir que debemos poner el código en cada entrada?
No se podría poner directamente para que saliese automáticamente en todass las entradas.
Gracias guapa

Responder
Gem@

Así es Marisabel pero no es necesario que lo añadas cada vez puedes añadir el código en la plantilla de entrada y aparecerá en el editor automáticamente.
Otra solución es crear unos bordes en el espacio de los post y aunque el efecto no sea el mismo saldrá en todas las entradas incluso las que están editadas anteriormente.
Haz la prueba...
Busca donde dice .post { y debajo añade
padding : 10px;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;

No te olvides que al final cierra con esto--> } y de mirar en vista previa ;)

Responder
Templo Espiritualista Trinitario de Annan

Hola Gema, quisiera saber cómo ponerle sombra unicamente al texto ya que el fondo que tengo hace que se pierda el texto de las entradas y de la side bar... mil gracias por toda tu ayuda. :D

atte. Rodrigo.
rod.fdez@hotmail.com
http://www.templodeannan.blogspot.com/

Responder
Gem@

:: Contestado está en el otro comentario :)

Responder
Daniel Enriquez de Guevara

Muchas gracias Gemma, eres de gran ayuda

Responder
Gem@

:: Gracias a ti por comentar Daniel ;)

Responder
Daniel Enriquez de Guevara

Hola Gema, mira pensé que lo había hecho bien, pero no, te explico: puesto tal cual lo expones lo deja bien pero me aumenta a mayores el ancho del blog, y si solo pongo:
Busca donde dice .post { y debajo añade
padding : 10px;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
No me aumenta el ancho del blog pero en lugar de sombra, le da un efecto de tres dimensiones,

¿por qué?

Gracias por tu amabilidad

Responder
Gem@

:: Daniel Enriquez de Guevara siguiendo estos pasos lo que conseguimos es que la ubicación de los bordes creen el efecto de sombra.
Si lo que deseas es añadir ese efecto a los post inténtalo de esta %% "forma"

Sería algo así:
.post {
width:630px;
padding:5px;
background-color:#FFF;
border: 1px solid #C0C0C0;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

En width es un ancho que modificamos según el espacio de nuestros post y podemos ver el resultado en vista previa.
Ese aumento del blog es lógico porque los bordes también ocupan espacio.

Responder
Daniel Enriquez de Guevara

Con Daniel es suficiente, muchísimas gracias queda perfecto, y gracias también por tu labor de ayuda, para los que no sabemos html eres un gran consuelo. Para poner la sombra en los gadgets ¿Qué habría que poner?

Responder
Gem@

:. Serían los mismos estilos Daniel, sólo que con menos anchura, y si no me equivoco donde tienes .sidebar .widget, main.widget :)

No me di cuenta que algunos códigos se convirtieron en emoticones en el comentario anterior :S

Responder
Daniel Enriquez de Guevara

En general muy bien, el único problema es que en la sidebar tengo gadgets de varios tamaños, y este código no los respeta dado que los deja todos iguales, Si quieres verlo, http://wwwmundonuevo-daniel.blogspot.com

Responder
Gem@

:: Pues yo lo veo muy bien, estoy por decir que mucho mejor si se adapta todos al mismo ancho :)

Responder
Daniel Enriquez de Guevara

Me explico mejor, al poner dos filas, esencialmente para que me entre todo (también porque estéticamente pienso que queda mejor), donde pone "Noticias" me queda muy pequeño, ya que lo deja al mismo ancho que todos los otros, pasa lo mismo al final,

Responder
Gem@

:: Lamento la demora Daniel, sobre ese problema si aún no lo has solucionado puede intentarse añadiendo estilos a esos gadgets incluyendo la medida de cada uno.
Lo primero es averiguar la id de cada gadget eso lo sabremos mirando en la plantilla y veremos algo así:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
En el ejemplo la id de el gadget sería HTML2 lo copiamos y creamos los estilos.

#HTML2 {
aquí los estilos de la sombra y la medida que le damos al gadget.
width:190px;
height:240px;
}

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top